<template>
  <div class="topic">
    <div class="topicmid">
      <!-- 话题详情 -->
      <div class="topicdetail">
        <img :src="detaillist.coverMobileUrl" alt="" class="detailimg" />
        <h5>#{{ detaillist.title }}#</h5>
        <p v-if="detaillist.text">{{ detaillist.text[0] }}</p>
        <p v-if="detaillist.text">{{ detaillist.text[1] }}</p>
      </div>
      <!-- 热门评论 -->
      <div class="combox">
        <p class="hot"><span>热门评论</span></p>
        <div class="usercom" v-for="(item, index) in hottopic" :key="index">
          <div class="user">
            <div class="infobox">
              <div class="avabox">
                <img :src="item.user.avatarUrl" alt="" class="avaimg" />
              </div>
              <span class="nickname">{{ item.user.nickname }}</span>
              <span v-if="datas[index].song" class="share">分享单曲：</span>
            </div>
            <span class="song" v-if="datas[index].song"
              >#{{ datas[index].song.name }}#</span
            >
            <p class="msg">{{ datas[index].msg }}</p>
            <div class="shareimg">
              <img
                :src="datas[index].song.album.blurPicUrl"
                alt=""
                v-if="datas[index].song"
              />
              <img
                :src="datas[index].resource.coverImgUrl"
                alt=""
                v-if="datas[index].resource"
              />
            </div>
          </div>
          <div class="footer">
            <van-icon name="share-o" />
            <span class="shareCount">{{ item.info.shareCount }}</span>
            <van-icon name="chat-o" />
            <span class="commentCount">{{ item.info.commentCount }}</span>
            <van-icon name="good-job-o" />
            <span class="likedCount">{{ item.info.likedCount }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getdetailAPI, gettopicdetailAPI } from "../../../../api/focus";
export default {
  name: "topic",
  data() {
    return {
      detaillist: [],
      hottopic: [],
      datas: [],
      topicId: "",
    };
  },
  props: [],
  components: {},
  computed: {},
  watch: {},
  created() {
    this.topicId = this.$route.params.id;
    console.log(this.topicId);
    this.getdetail();
    this.hotdetailtopic();
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
  methods: {
    //获取话题详情
    async getdetail() {
      //export const getdetailAPI = (actId) => get(`/topic/detail?actid=${actId}`)
      // const res = await getdetailAPI(this.topicId);
      //export const getdetailAPI = (data) => get(`/topic/detail`, data)
      const res = await getdetailAPI({ actid: this.topicId });
      console.log(res);
      this.detaillist = res.act;
    },
    //获取话题详情热门动态
    async hotdetailtopic() {
      const res = await gettopicdetailAPI(this.topicId);
      console.log(res.events);
      this.hottopic = res.events;

      let arr = res.events;
      let dataArr = [];
      // console.log(arr);
      arr.forEach((v) => {
        let obj = JSON.parse(v.json);
        dataArr.push(obj);
      });
      console.log(dataArr);
      this.datas = dataArr;
    },
  },
};
</script>

<style scoped>
.topicmid {
  margin: 10px;
}
/* 详情 */
.detailimg {
  width: 100%;
}
.topicdetail h5 {
  color: #6c80b0;
  margin: 20px 0px 30px;
}
.topicdetail p {
  color: #727272;
  font-size: 12px;
  margin-top: 20px;
  line-height: 2;
}
/* 热门评论 */
.avabox {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  margin-left: 10px;
}
.nickname {
  font-size: 14px;
  color: #6c8099;
  margin-left: 10px;
  margin-right: 5px;
}
.avaimg {
  width: 40px;
  height: 40px;
}
.msg {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 27px;
  font-weight: 20;
  color: #2c2c2c;
}
.usercom {
  margin-top: 30px;
}

.infobox {
  display: flex;
  align-items: center;
}
.song {
  color: #6c8099;
  font-size: 14px;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 15px;
  display: block;
  padding-left: 10px;
}
.share {
  color: #616161;
  font-size: 14px;
}
.topicimgbox {
  padding: 0;
}
.topicimgbox img {
  width: 100%;
}
.shareimg {
  width: 340px;
  /* padding: 10px; */
  margin: 15px auto;
  border-radius: 10px !important;
  overflow: hidden;
}
.shareimg img {
  width: 100%;
}
.footer {
  padding: 10px;
  font-size: 12px;
  color: #606060;
}
.shareCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.commentCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
.likedCount {
  margin-left: 5px;
  margin-right: 40px;
  color: #9c9c9c;
}
</style>
           